<template>
  <div class="box">
    <!-- 欢迎语 -->
    <el-row>
      <el-col :span="24">
        <div class="block">
          <span class="welcome" style="color: red; margin-right: 5px" v-if="userInfo">{{ userInfo?.name }}</span>
          您好！欢迎使用HT后台管理系统v3!
          当前时间：{{ currentTime }}
        </div>
      </el-col>
    </el-row>

    <!-- 六大指标卡片 -->
    <el-row :gutter="20">
      <el-col v-for="item in countList" :key="item.label" :span="4" class="highlight">
        <div class="block">
          <span>{{ item.label }}</span>
          <p class="label">{{ item.value }}</p>
        </div>
      </el-col>
    </el-row>

    <!-- 系统信息 -->
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <span>系统信息</span>
          <el-divider />
          <el-table :data="sysInfo" :show-header="false" border style="width: 100%">
            <el-table-column prop="label" />
            <el-table-column prop="value" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <myChart style="height: 320px" :option="option" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import { useIntervalFn } from '@vueuse/core'

import myChart from '@/components/myChart/index.vue'

const util=inject("util")
const config=inject("config")

// store 和 actions
const store = useStore()
// 用户信息
const userInfo = ref(util.getSession(config.sessionKey.USER_INFO))



// 当前时间，自动刷新
const currentTime = ref(util.fmtDate(new Date()))
useIntervalFn(() => {
  currentTime.value = util.fmtDate(new Date())
}, 1000)

// 统计数据
const countList = reactive ([
  { label: '用户数', value: 300 },
  { label: '会员数', value: 59 },
  { label: '资源数', value: 120 },
  { label: '文章数', value: 300 },
  { label: '分享量', value: 200 },
  { label: '下载量', value: 150 },
])

// 系统信息
const sysInfo = reactive ([
  { label: '系统版本', value: '2.0v' },
  { label: '操作系统', value: 'windows' },
  { label: '数据库', value: 'mysql5.7' },
  { label: '运行环境', value: 'jdk8 / maven / nodeV16.14.1 / redis' },
])

// 图表配置
const option = reactive ({
  title: {
    text: '系统使用走势图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['新增用户', '新增资源', '下载量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新增用户',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230,]
    },
    {
      name: '新增资源',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330]
    },
    {
      name: '下载量',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330]
    }
  ]
})



</script>

<style scoped lang="scss">
.box {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;

  .block {
    margin-bottom: 20px;
    padding: 15px 0;
    background: #f2f2f2;
    color: #140000;

    span {
      margin-left: 20px;
    }

    .label {
      margin-left: 20px;
      color: #009688;
      font-size: 25px;
      margin-top: 10px;
      font-weight: bold;
    }

    &:hover {
      background: #dcdcdc;
      cursor: pointer;
    }
  }
}
</style>
